<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 固定定位是元素固定于浏览器可视区的位置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。 */
    /* 选择器 { position: fixed; }     */
    /* 固定定位的特点：（务必记住）
1. 以浏览器的可视窗口为参照点移动元素。
 跟父元素没有任何关系
 不随滚动条滚动。
2. 固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。 */




    .w {
        /* 版心盒子 */
        width: 1200px;
        margin: auto;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .body {
        height: 1400px;
        background-color: pink;
    }

    .fixed {
        position: fixed;
        top: 249px;
        left: 50%;
        margin-left: 600px;
        width: 50px;
        height: 100px;
        background-color: burlywood;
    }
</style>

<body>
    <div class="body w">
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>


        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
        你好你好你好你好你好<br>
    </div>
    <div class="fixed">bianbian</div>
</body>

</html>